<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-900 via-blue-950 to-black pt-24 flex flex-row items-stretch">
    <MainMenu />
    <!-- 地图区域 -->
    <div class="flex-1 flex items-stretch">
      <div class="w-2/3 h-[80vh] rounded-2xl shadow-2xl border-2 border-blue-800/40 overflow-hidden m-8 relative">
        <div id="mobile-map" class="w-full h-full"></div>
      </div>
      <!-- 采集信息卡片 -->
      <div class="w-1/3 flex flex-col space-y-6 pr-8 pt-8">
        <div v-for="item in collectData" :key="item.id" class="bg-blue-900/70 rounded-xl shadow-lg p-4 text-white border border-cyan-400/30">
          <div class="font-bold text-cyan-300 mb-2">采集点：{{ item.name }}</div>
          <div class="text-sm mb-1">经度：{{ item.lng }}</div>
          <div class="text-sm mb-1">纬度：{{ item.lat }}</div>
          <div class="text-sm mb-1">时间：{{ item.time }}</div>
          <div v-if="item.img" class="mb-2"><img :src="item.img" class="rounded-lg w-full max-h-32 object-cover" /></div>
          <div v-if="item.video" class="mb-2">
            <video :src="item.video" controls class="rounded-lg w-full max-h-32 bg-black"></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import MainMenu from '../components/MainMenu.vue'
import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'

const collectData = [
  {
    id: 1,
    name: '点位A',
    lng: 116.397428,
    lat: 39.90923,
    time: '2024-05-01 10:00:00',
    img: 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&w=400',
    video: ''
  },
  {
    id: 2,
    name: '点位B',
    lng: 116.407428,
    lat: 39.91923,
    time: '2024-05-01 10:10:00',
    img: '',
    video: 'https://www.w3schools.com/html/mov_bbb.mp4'
  }
]

onMounted(() => {
  const map = new maplibregl.Map({
    container: 'mobile-map',
    style: '/mapstyle.json',
    center: [116.397428, 39.90923],
    zoom: 12
  })
  collectData.forEach(item => {
    new maplibregl.Marker()
      .setLngLat([item.lng, item.lat])
      .addTo(map)
  })
})
</script> 